import React, { useState } from 'react';
import { Breadcrumb, Input, Select, Tabs } from 'antd';
import pub from '@/css/Tom/pub.less';
import style from '@/css/Tom/order.less';
import Tables from '@/componts/jcomponts/Tables';

const { TabPane } = Tabs;

function Order(props: any) {
  const { name, path } = props.route;
  const { Option } = Select;
  const rot = [
    { name: '首页', path: '/' },
    { name: '门店', path: '/storeAllStore' },
    { name: name, path: path },
  ];
  const tarbars = [
    { tab: '全部', key: '1' },
    { tab: '代付款', key: '2' },
    { tab: '代发货', key: '3' },
    { tab: '已发货', key: '4' },
    { tab: '已完成', key: '5' },
    { tab: '退款中', key: '6' },
    { tab: '关闭', key: '7' },
  ];
  //state 属性
  const [input_val, set_input] = useState('');

  function handleChange(value: object) {
    console.log(`selected ${value}`);
  }

  function search() {
    console.log('开始搜索', input_val);
  }

  function getValue(e: string) {
    //将输入框的值进行绑定
    set_input(e);
  }

  function callback(key: any) {
    console.log(key);
  }

  // @ts-ignore
  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <div className={style.search}>
        <Select
          bordered={false}
          defaultValue="订单号"
          style={{
            width: 150,
            background: '#fff',
            border: '2px solid #101010',
          }}
          onChange={handleChange}
        >
          <Option value="订单号">订单号</Option>
          <Option value="买家姓名">买家姓名</Option>
          <Option value="买家手机号">买家手机号</Option>
        </Select>
        <Input
          onPressEnter={search}
          bordered={false}
          onChange={(e) => getValue(e.target.value)}
          style={{
            background: 'white',
            border: '1px solid #101010',
            marginLeft: '10px',
          }}
          size="small"
          placeholder="Basic usage"
        />
        <div onClick={search} className={style.show}>
          搜索
        </div>
      </div>
      <div style={{ height: '30em', overflow: 'auto' }}>
        <Tabs
          size="small"
          style={{ overflow: 'auto' }}
          defaultActiveKey="1"
          onChange={callback}
          style={{ overflow: 'auto' }}
        >
          {tarbars.map((e) => (
            <TabPane tab={e.tab} key={e.key}>
              <Tables type={2} data={e} />
            </TabPane>
          ))}
        </Tabs>
      </div>
    </div>
  );
}

export default Order;
